<template>
	<view class="vip">
		<view class="flex align-center" style="margin-top: 20rpx;" v-for="(item, index) in listFrom" :key="index"  @tap="jump('/pages/goods/detail/index', { id: item.id })">
			<view class="img-box">
				<image :src="item.image"
					style="width: 260rpx; height: 260rpx;" mode=""></image>
					<image src="../../static/noOpacity.png" v-if="item.stock == 0" class="img1">
					</image>
			</view>
			<view class="" style="margin-left: 20rpx; line-height: 60rpx;">
				<view class="" style="font-size: 28rpx;width: 60vw;">
					<text class="text-dr text-black block text-cut">{{item.title}}</text>
				</view>
				<view class="" style="color: #717171; font-size: 26rpx; ">
					<text class="text-df text-gray  ">{{item.category_name}}</text>
				</view>
				<view class="" style="color: #ff0000; font-size: 22rpx;" v-for="(item1, id) in item.sku_price" :key="item1.id">
					<text class="text-df text-black ">价格：<text class="text-price text-red">{{item.sku_price[0].price}}</text></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listFrom: [],
				page: 1,
				nPice:''
			}
		},
		onLoad() {
			this.getListFrom()
			
		},
		onReachBottom() {
			this.page++ 
			this.getListFrom()
		},
		methods: {
			getListFrom () {
				console.log(this.page)
				this.$api('goods.lists',{
					per_page: 10,
					page: this.page,
					model: 'vip',
				}).then((res => {
					this.listFrom = [...this.listFrom,...res.data.data]
					this.listFrom.forEach(item=>{
						if(item.sku_price[0].price>=10000){
							item.sku_price[0].price=item.sku_price[0].price/10000 + '万'
						}
					})
					console.log(this.listFrom)
				}))
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.vip {
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		background-color: #FFFFFF;
		
		.img-box {
			// width: 345rpx;
			// height: 345rpx;
			overflow: hidden;
			position: relative;
		
			.img1 {
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				width: 100%;
				height: 100%;
				font-size: 40rpx;
				background-color: rgba(0,0,0,0.4);
				line-height: 290rpx;
				background-size: 100%;
				background-repeat: no-repeat;
			}
		}
	}
</style>
